<template>
  <el-drawer v-model="dialogVisible" :v-loading="loading" size="70%" @close="close">
    <template #header>
      <div style="font-size: 16px; font-weight: bold">{{ title }}</div>
    </template>
    <el-table class="table" v-loading="loading" :data="menuList" style="width: 100%" border>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column prop="sort" label="排序" align="center" />
      <el-table-column prop="title" label="菜单" align="center" />
      <el-table-column prop="href" label="路由" align="center" />
      <el-table-column prop="icon" label="图标" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="禁用"
            @change="changeStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作" width="280" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" icon="Edit" @click="editHandler(scope.row)">
            编辑
          </el-button>
          <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElNotification, FormInstance } from 'element-plus'
import { authorize, saveAuthorize } from '@/api/admin'
const loading = ref(false)
const saveLoading = ref(false)
const dialogVisible = ref(false)
const title = ref('')
const menuList = ref()

function close() {}

const show = (item = {}, list) => {
  title.value = item.title + '下级菜单'
  dialogVisible.value = true

  menuList.value = []
  loading.value=true
  list.forEach((row) => {
    if (item.id == row.pid) {
      menuList.value.push(item)
    }
  })
  loading.value=false
}

defineExpose({
  show,
})
</script>